<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>表单</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">

	<link rel="stylesheet" href="/css/global.css" media="all">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
	<script type="text/javascript" src="/plugins/layui/layui.js"></script>

	<style>
		.layui-form-label {
			width: 10%;
		}
		.layui-input-block {
			margin-left: 13%;
		}
		img {
			width: 110px;
			height: 110px;
		}
		.layui-upload-list {
			margin-left: 13%;
		}
	</style>
</head>
<body>
<div style="margin: 15px;">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>编辑账户</legend>
	</fieldset>

	<form id="layui-form" class="layui-form" action="/manage/account/modifyAccount" method="post">
		<input type="hidden" name="id" value="${account.id!}" autocomplete="off" class="layui-input">
		<div class="layui-form-item">
			<label class="layui-form-label layui-required-tip">用户名：</label>
			<div class="layui-input-block">
				<input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" value="${account.userName!}" autocomplete="off" disabled class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码：</label>
			<div class="layui-input-block">
				<input type="password" name="password" id="password" lay-verify="password" placeholder="请输入6到20位密码" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">确认密码：</label>
			<div class="layui-input-block">
				<input type="password" name="repassword" id="repassword" lay-verify="repassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label layui-required-tip">昵称：</label>
			<div class="layui-input-block">
				<input type="text" name="nickName" lay-verify="required" placeholder="请输入昵称" value="${account.nickName!}" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label layui-required-tip">用户头像：</label>
			<div class="layui-input-block">
			<button type="button" class="layui-btn" id="test">
				<i class="layui-icon">&#xe67c;</i>用户头像
			</button>
			</div>
			<div class="layui-upload-list">
				<img class="layui-upload-img" id="logoImg" src="${account.head!}">
				<input type="hidden"  name="head" id="head" value="${account.headKey!}"/>
				<p id="logoText"></p>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">提示：</label>
			<div class="layui-input-block">
				<input type="text" name="tips" placeholder="请输入提示" value="${account.tips!}" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label layui-required-tip">手机号码：</label>
			<div class="layui-input-block">
				<input type="text" name="phone" lay-verify="required|phone" placeholder="请输入手机号码" value="${account.phone!}" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label layui-required-tip">邮箱：</label>
			<div class="layui-input-block">
				<input type="text" name="email" lay-verify="required|email" placeholder="请输入邮箱" value="${account.email!}" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态：</label>
			<div class="layui-input-block">
				<#if account.status==1>
					<input type="radio" name="status" value="1" title="正常" checked/>
					<input type="radio" name="status" value="0" title="禁用" />
				<#else>
					<input type="radio" name="status" value="1" title="正常" />
					<input type="radio" name="status" value="0" title="禁用" checked/>
				</#if>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="demo1">修改</button>
				<button type="reset" class="layui-btn layui-btn-primary" onclick="javascript:history.back();">返回</button>
			</div>
		</div>
	</form>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate'], function() {
        var $ = layui.jquery;
        var layer = layui.layer; //获取当前窗口的layer对象
        var form = layui.form;

        /*form.on('submit(demo1)', function(data) {
            if(data.field.head == ""){
                alert("请上传身份头像!");
                test.focus();
                return false;
            }
            return true;
        });*/

        form.verify({
            //password:[/(.+){6,12}$/,'密码必须6到12位'],
            password: function(value){
                if (value != "") {
                    var regx = /^[\S]{6,20}$/;
                    if(regx.test(value) == false){
                        return "密码长度限填6-20";
					}
                }
			},
            repassword: function (value) {
                if (value != $('#password').val()) {
                    $('#rePassword').val("");
                    return "确认密码与密码不一致";
				}
            }
		});
    });

    layui.use('upload', function(){
        var upload = layui.upload;
        var $ = layui.jquery
        //执行实例
        var uploadlogo = upload.render({
            url: '/manage/upload/uploadFile',
            elem: '#test', //指定原始元素，默认直接查找class="layui-upload-file"
            size: 1000,
            before: function(obj) {
    	        layer.load();
    	    },
            done: function(res){
                //上传完毕回调
                $('#logoImg').attr('src', res.data["imgUrl"]); //图片链接（base64）
                $('#head').val(res.data["key"]);
                layer.closeAll('loading');
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>
</body>


</html>